import {
  reqAddHospitalSetItem,
  reqGetHospitalSetItem,
  reqUpdateHospitalSet,
} from "@/api/hospital/hospitalSet";
import { Button, Card, Form, Input, message } from "antd";
import { useForm } from "antd/lib/form/Form";
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";

export default function AddOrUpdateHospital() {
  //获得表单对象
  let [form] = useForm();
  //获得 navigate 跳转函数
  let navigate = useNavigate();
  //设置加载中的状态
  let [loading, setLoading] = useState(false);

  //声明函数 表单完成的事件回调
  let finish = async () => {
    try {
      //获取表单数据
      let values = form.getFieldsValue();
      //设置状态为加载中
      setLoading(true);
      if (!id) {
        //发送请求
        await reqAddHospitalSetItem(values);
        //提示
        message.success("添加成功");
      } else {
        //更新数据请求
        await reqUpdateHospitalSet({
          ...values,
          id: id
        });
        //更新成功的提示
        message.success("更新成功");
      }
      //设置为不在加载中..
      setLoading(false);
      //跳转医院设置列表页面
      navigate("/syt/hospital/hospitalSet");
    } catch (e) {
      //设置为不在加载中..
      setLoading(false);
    }
  };

  //声明函数 做返回功能
  let back = () => {
    navigate(-1);
  };

  //获得 id 参数
  let { id } = useParams();

  //声明函数
  let getHospitalSet = async () => {
    //获得当前医院设置的信息
    let hospitalSet = await reqGetHospitalSetItem(id as string);
    //设置表单元素中的值
    form.setFieldsValue(hospitalSet);
  };

  useEffect(() => {
    getHospitalSet();
  }, []);

  return (
    <Card>
      <Form
        name="basic"
        form={form}
        onFinish={finish}
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 22 }}
        autoComplete="off"
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ required: true, message: "请输入医院名称" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{ required: true, message: "请输入医院编号" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ required: true, message: "请输入api基础路径" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[{ required: true, message: "联系人不能为空" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[
            { required: true, message: "联系人手机号不能为空" },
            { pattern: /^1[3-9][0-9]{9}$/, message: "手机号格式不正确" },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 2, span: 16 }}>
          <Button loading={loading} type="primary" htmlType="submit">
            保存
          </Button>
          <Button className="ml" onClick={back}>
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}
